<template>
  <div>
    <el-drawer
      title="角色权限"
      :visible.sync="drawerFlag"
      size="30%"
      append-to-body
      @close="closeDrawer"
    >
      <div style="padding: 20px;">
        <el-button size="small" type="primary" @click="savePermission" :loading="loading.add">保存</el-button>
        <el-button size="small" style="margin-left: 10px" @click="closeDrawer">关闭</el-button>
        <el-tooltip content="刷新" placement="right">
          <el-button
            size="small"
            icon="el-icon-refresh"
            type="success"
            circle
            @click="initData(role)"
          ></el-button>
        </el-tooltip>
        <el-divider />
        <div style="height: 100vh; padding-bottom: 200px;">
          <el-scrollbar>
            <el-tree
              :data="permissionData"
              :props="defaultProps"
              node-key="id"
              show-checkbox
              ref="permissionTree"
            ></el-tree>
          </el-scrollbar>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { doGet, doPostJson } from '@/utils/utils'
import * as ResponseStatus from '@/utils/response-status'
export default {
  name: 'PerminissionAssignDrawer',
  props: {},
  data() {
    return {
      role: {},
      drawerFlag: false,
      allModuleList: [],
      rolePermissionList: [],
      userPermissionList: [],
      permissionData: [],
      checkPermissionIds: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      loading: {
        add: false,
      },
    }
  },
  mounted() {},
  methods: {
    /**
     * 初始化数据，请求后端数据
     * @param role 角色
     */
    initData(role) {
      this.drawerFlag = true
      this.role = role
      // 获取所有的模块
      doPostJson(
        '/module/admin/all-cond',
        {
          isActive: 1,
        },
        {}
      )
        .then((res) => {
          this.allModuleList = res.data.rows
          // 获取当前指定角色的权限
          doPostJson(
            '/role-permission/admin/all-cond',
            {
              roleId: role.id,
              isActive: 1,
            },
            {}
          )
            .then((res) => {
              this.rolePermissionList = res.data.rows
              // 获取当前登入用户的所有权限
              doGet('/permission/user/all', {})
                .then((res) => {
                  this.userPermissionList = res.data.rows
                  this.initPermissionData()
                })
                .catch((err) => {})
            })
            .catch((err) => {})
        })
        .catch((err) => {})
    },
    /**
     * 初始化权限数据
     */
    initPermissionData() {
      this.permissionData = []
      this.checkPermissionIds = []
      this.allModuleList.forEach((module) => {
        let moduleNode = {}
        moduleNode.label = module.title
        let modulePermissions = []
        this.userPermissionList.forEach((userPermission) => {
          if (userPermission.moduleId === module.id) {
            // 该权限是当前module下的权限
            let permissionId = userPermission.id
            let modulePermission = {}
            modulePermission.id = userPermission.id
            modulePermission.label = userPermission.title
            modulePermission.permission = userPermission.permission
            modulePermissions.push(modulePermission)
            this.rolePermissionList.forEach((rolePermission) => {
              if (rolePermission.permissionId === permissionId) {
                // 说明当前角色有该权限
                this.checkPermissionIds.push(rolePermission.permissionId)
              }
            })
          }
        })
        moduleNode.children = modulePermissions
        this.permissionData.push(moduleNode)
      })
      setTimeout(() => {
        this.$refs.permissionTree.setCheckedKeys(this.checkPermissionIds)
      }, 10)
    },
    // 关闭权限配置
    closeDrawer() {
      this.drawerFlag = false
      this.permissionData = []
    },
    /**
     * 保存权限
     */
    savePermission() {
      let checkedNodes = this.$refs.permissionTree.getCheckedNodes(true)
      let permissions = checkedNodes
      let params = []
      permissions.forEach((permission) => {
        params.push({
          roleId: this.role.id,
          roleTitle: this.role.title,
          roleIsActive: this.role.isActive,
          permissionId: permission.id,
          permissionTitle: permission.label,
          permissionUrl: permission.permission,
          permissionIsActive: 1,
        })
      })
      this.loading.add = true
      doPostJson('/role-permission/admin/remove-batch-save/' + this.role.id, params, {})
        .then((res) => {
          this.$message.success('保存角色权限成功')
          this.drawerFlag = false
          this.loading.add = false
        })
        .catch((err) => {
          this.loading.add = false
        })
    },
  },
}
</script>

<style lang="scss">
</style>
